<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
			@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">退货寄回</text>
		</navBar>
		
		<scroll-view 
		scroll-y
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		class="mian_mailingAddress">
			
			<view class="mian_mailingAddress_top pd10">
				<view class="mian_mailingAddress_top_t">
					<view class="mian_mailingAddress_top_t_l mr10">
						<!-- <image src="static/tw1.png"></image> -->
						<view class="main_addressList_item_top_zi">
						{{name ? name.substr(0,1) : '默'}}</view>
					</view>
					<view class="mian_mailingAddress_top_t_r">
						<view class="name mt10">{{name}}</view>
						<view class="phone mt10">{{phone}}</view>
					</view>
				</view>
				<view class="mian_mailingAddress_top_c mt10">
					收货地址：{{province + city + area + address}}
				</view>
				<view class="mian_mailingAddress_top_b mt10">
					请按上面的地址及联系人信息进行寄回，如已寄回请在下面填写对应的寄回信息，方便我们进行物流追踪！
				</view>
			</view>
			
			<view class="mian_mailingAddress_bom mt10 pd10">
				<view class="mian_mailingAddress_bom_t">
					请填写寄回信息
				</view>
				<view class="mian_mailingAddress_bom_input">
					<view class="mr10">
						快递公司
					</view>
					<view class="">
						<u--input
						readonly
						@click.native="showDeliveryName = true" 
						border='none'
						v-model="deliveryName"
						placeholder='请选择快递公司'
						></u--input>
					</view>
				</view>
				<view class="mian_mailingAddress_bom_input">
					<view class="mr10">
						快递单号
					</view>
					<view class="">
						<u--input
						border='none'
						v-model="deliveryNunber"
						placeholder='请输入快递单号'
						maxlength="32"
						></u--input>
					</view>
				</view>
			</view>
			
			<view  
			@click="submit"
			class="">
				<newBtn name="提交" bgColor="#ec4141" color="#fff"></newBtn>
			</view>
		</scroll-view>
		
		
		<!-- 快递公司选择 -->
		<u-picker 
		keyName='name'
		@cancel='showDeliveryName = false'
		@confirm='pickerConfirm'
		title='请选择快递公司'
		:show="showDeliveryName" 
		:columns="columns"></u-picker>
		
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>
	</view>
	
	
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import {sendCommoditiesImmediately,listMallLogistcsPageInfo} from '@/api/global.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		components:{
			newBtn
		},
		data() {
			return {
				statusBarHeight:'',
				height:'',
				name:'',//退货联系人
				phone:'',//退货联系电话
				province:'',//省
				city:'',//市
				area:'',//区、县
				address:'',//详细地址
				deliveryName:'',//快递公司
				deliveryCode:``,//code
				deliveryNunber:'',//快递单号
				returnId:'',//退货单id
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'温馨提示',
					content:''
				},
				showDeliveryName:false,//弹出快递公司选择
				columns:[[
					{
						name:`百世快递`,
						code:`HTKY`
					},
					{
						name:`中通快递`,
						code:`ZTO`
					},
					{
						name:`申通快递`,
						code:`STO`
					},
					{
						name:`圆通速递`,
						code:`YTO`
					},
					{
						name:`韵达速递`,
						code:`YD`
					},
					{
						name:`邮政快递包裹`,
						code:`YZPY`
					},
					{
						name:`EMS`,
						code:`EMS`
					},
					{
						name:`顺丰速运`,
						code:`SF`
					},
					{
						name:`京东快递`,
						code:`JD`
					},
					{
						name:`优速快递`,
						code:`UC`
					},
					{
						name:`德邦快递`,
						code:`DBL`
					},
					{
						name:`极兔速递`,
						code:`JTSD`
					},
					{
						name:`众邮快递`,
						code:`ZYE`
					},
					{
						name:`菜鸟直达`,
						code:`CNSD`
					},
					{
						name:`宅急送`,
						code:`ZJS`
					}
				]],//快递公司列表
			};
		},
		onLoad(options) {
			//获取退货单号
			
			this.returnId = options?.returnId || ''
			//获取退货地址
			this.getAddress()
			//获取快递公司地址
			// this.getDeliveryNameList()
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('mian_mailingAddress')
			})
		},
		methods:{
			//地址选择
			pickerConfirm(val){
				console.log(val);
				this.deliveryName = val?.value?.[0]?.name || '';
				this.deliveryCode = val?.value?.[0]?.code || '';
				this.showDeliveryName = false
			},
			//模态框确认
			async modalConfirm(){
				let res  = await sendCommoditiesImmediately({
					recipient:this.name,
					phone:this.phone,
					province:this.province,
					city:this.city,
					area:this.area,
					address:this.address,
					deliveryName:this.deliveryName,
					deliveryCode:this.deliveryCode,
					deliveryNumber:this.deliveryNunber,
					returnId:this.returnId
				})
				if(res.code == 2000){
					this.modalShow = false
					this.Utils.toast('提交成功')
					setTimeout(()=>{
						uni.navigateTo({
							url:'/page_public/refundOrder'
						})
					},500)
					
				}else{
					this.Utils.toast(`${res.msg}`)
				}
			},
			//提交
			submit(){
				if(!this.deliveryName){
					this.Utils.toast(`请选择快递公司`);
					return;
				}
				if(!this.deliveryNunber){
					this.Utils.toast(`请填写快递单号`);
					return;
				}
				this.modalShow = true
				this.modalInfo.content = '是否提交当前物流信息？？？'
			},
			//获取快递公司列表
			async getDeliveryNameList(){
				let res = await listMallLogistcsPageInfo({
					status:1
				})
				if(res.code == 2000){
					this.columns = [res?.data?.info]
					console.log(this.columns);
				}else{
					this.Utils.toast(`${res.msg}`)
				}
			},
			//获取退货地址
			getAddress(){
				//获取退货人
				this.name = this.$store?.state?.configSetting?.returnOrderName || ''
				//退货电话
				this.phone = this.$store?.state?.configSetting?.returnOrderPhone || ''
				//退货省市区
				let ssq = this.$store?.state?.configSetting?.returnOrderShengshiqu.split('/') || ''
				this.province = ssq && ssq.length ? ssq[0] : ''
				this.city = ssq && ssq.length ? ssq[1] : ''
				this.area = ssq && ssq.length ? ssq[2] : ''
				//退货地址
				this.address = this.$store?.state?.configSetting?.returnOrderAddress || ''
			},
			//返回上一级
			navToBack(){
				uni.navigateTo({
					url:'/page_public/refundOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm  {
		background-color: #ec4141;
		
		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}
	.mian_mailingAddress{
		width: 100%;
		box-sizing: border-box;
		
		.mian_mailingAddress_top{
			width: 100%;
			height: 360rpx;
			box-sizing: border-box;
			background-color: #fff;
			.mian_mailingAddress_top_t{
				display: flex;
				.mian_mailingAddress_top_t_l{
					image{
						width: 120rpx;
						height: 120rpx;
					}
					.main_addressList_item_top_zi{
										width: 80rpx;
										height: 80rpx;
										border-radius: 50%;
										background-color: #FFE3E3;
										color: $text_color_ec4141;
										text-align: center;
										line-height: 80rpx;
										margin-top: 10px;
									}
				}
				.mian_mailingAddress_top_t_r{
					.name{
						font-size: 32rpx;
						color: $text_color_333;
						font-weight: bold;
					}
					.phone{
						font-size: $font_size_14;
						color: $text_color_808080;
					}
				}
			}
			.mian_mailingAddress_top_c{
				font-size: $font_size_14;
				color: $text_color_333;
			}
			.mian_mailingAddress_top_b{
				font-size: $font_size_12;
				color: $text_color_ec4141;
			}
		}
		
		.mian_mailingAddress_bom{
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			.mian_mailingAddress_bom_t{
				height: 88rpx;
				font-size: $font_size_14;
				color: $text_color_333;
				font-weight: bold;
			}
			.mian_mailingAddress_bom_input{
				display: flex;
				height: 88rpx;
				font-size: $font_size_14;
				color: $text_color_333;
				align-items: center;
				border-bottom: 1px solid #f3f3f3;
			}
		}
	}

</style>
